<template>
  <div class="doctor-account">
    <div class="account-header">
      <h2>区块链账户</h2>
    </div>
    
    <el-card class="account-card">
      <div class="account-info">
        <div class="info-item">
          <span class="label">账户地址:</span>
          <span class="value">{{ blockchainAccount }}</span>
        </div>
        
        <div class="info-item">
          <span class="label">创建时间:</span>
          <span class="value">{{ accountCreatedDate }}</span>
        </div>
        
        <div class="info-item">
          <span class="label">病历操作次数:</span>
          <span class="value">{{ transactions.length }} 次</span>
        </div>
        
        <div class="info-item">
          <span class="label">密钥:</span>
          <span class="value">*************</span>
        </div>
      </div>
      
      <div class="action-buttons">
        <el-button type="primary" icon="Refresh" @click="refreshAccount">刷新账户</el-button>
        <el-button type="warning" icon="Key" @click="exportKey">导出密钥</el-button>
      </div>
    </el-card>
    
    <el-card class="transaction-card">
      <template #header>
        <div class="card-header">
          <h3>最近病历操作记录</h3>
        </div>
      </template>
      
      <el-table :data="transactions" style="width: 100%">
        <el-table-column prop="date" label="日期" width="150" />
        <el-table-column prop="patient" label="患者" width="120" />
        <el-table-column prop="type" label="操作类型" width="120" />
        <el-table-column prop="hash" label="交易哈希" min-width="180" show-overflow-tooltip>
          <template #default="scope">
            <el-link type="primary" @click="viewTransaction(scope.row)">
              {{ truncateHash(scope.row.hash) }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="详情" width="80" align="center">
          <template #default="scope">
            <el-button 
              type="primary" 
              size="small" 
              icon="View"
              @click="viewTransactionDetails(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useAuthStore } from '@/store'

const authStore = useAuthStore()

// 区块链账户信息
const blockchainAccount = computed(() => authStore.blockchainAccount)
const accountCreatedDate = ref('2023-06-15 14:30:22')

// 交易数据
const transactions = ref([
  { id: 1, date: '2023-07-22 10:30', patient: '张明', type: '病历创建', hash: '0x9b7b0d1e4d8f0c3a6b5d2e8f1a0c3b5d2e8f1a0c3', status: '成功' },
  { id: 2, date: '2023-07-20 14:15', patient: '李红', type: '病历更新', hash: '0x742d35cc6634c0532925a3b844bc454e4438f44e', status: '成功' },
  { id: 3, date: '2023-07-18 09:45', patient: '王建国', type: '病历归档', hash: '0x5aafe7e8d70aae3a1c1b8f8c1e1a0c3b5d2e8f1a0', status: '成功' },
])

const truncateHash = (hash) => {
  if (!hash) return ''
  return `${hash.substring(0, 6)}...${hash.substring(hash.length - 4)}`
}

const viewTransaction = (tx) => {
  console.log('查看交易详情:', tx.hash)
}

const viewTransactionDetails = (tx) => {
  console.log('查看交易完整信息:', tx)
}

const refreshAccount = () => {
  console.log('刷新账户信息')
  // 这里可以添加从区块链获取最新账户信息的逻辑
}

const exportKey = () => {
  console.log('导出密钥')
  // 这里添加导出密钥的逻辑
}
</script>

<style scoped>
.doctor-account {
  padding: 20px;
}

.account-header {
  text-align: center;
  margin-bottom: 20px;
}

.account-header h2 {
  font-size: 24px;
  color: #1e5799;
  font-weight: 600;
}

.account-card, .transaction-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.account-info {
  padding: 20px 15px;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  width: 140px;
  font-weight: bold;
  color: #606266;
}

.value {
  flex: 1;
  font-family: monospace;
  word-break: break-all;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.transaction-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
</style>